echarts+流程图

最新推荐文章于 2024-03-22 14:14:01 发布
最新推荐文章于 2024-03-22 14:14:01 发布
阅读量4.1k 收藏 16
点赞数 7
分类专栏： echarts 文章标签： 流程图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44727080/article/details/108169327
版权

前言：

         echarts+流程图

效果图：

实现源码：

var title = [
    // 第零层
    {
        label: '0',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第一层
    {
        label: '1-0',
        warn: 5,
        error: 8,
        value: 5
    },
    {
        label: '1-1',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-2',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-3',
        warn: 5,
        error: 8,
        value: 7
    },
    // 第二层
    {
        label: '2-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-2',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-3',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-4',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第三层
    {
        label: '3-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-2',
        warn: 5,
        error: 8,
        value: 2
    },
];
var colorMap = {
    normal: '#18a849',
    warn: '#FFC125',
    error: '#FF0000',
};

colorFunction = function(obj) {
    if (obj.value < obj.warn) {
        return colorMap.normal;
    } else if (obj.warn <= obj.value && obj.value < obj.error) {
        return colorMap.warn;
    } else if (obj.error <= obj.value) {
        return colorMap.error;
    }
};
//具体的绘制流程图的方法
option = {
    tooltip: {
        trigger: 'item',
        formatter: function(para) {
            if (para.name != 'x' || para.name != 'y') {
                return para.name;
            } else {
                //其他的都正式显示，自己是什么就显示什么。
                return '';
            }
        }
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    textStyle: {
        color: '#000'
    },
    series: [{
        type: 'graph',
        tooltip: {
            backgroundColor: 'skyblue',
            //formatter: "{b} <br/>{a} : {c} h "
        },
        layout: 'none',
        symbolSize: 10,
        roam: false,
        label: {
            normal: {
                show: true,
                position: 'inside',
                //offset: [0,-60],//居上 20
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'BOLD',
                },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            normal: {
                textStyle: {
                    fontSize: 18
                }
            }
        },
        //注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
        data: [
            // 零层
            {
                name: title[0].label,
                x: 300,
                y: 0,
                value: title[0],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[0]),
                    }
                }
            },
            // 一层
            {
                name: title[1].label,
                x: 0,
                y: 200,
                value: title[1],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[1]),
                    }
                }
            },
            {
                name: title[2].label,
                x: 150,
                y: 200,
                value: title[2],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[2]),
                    }
                }
            },
            {
                name: title[3].label,
                x: 350,
                y: 200,
                value: title[3],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[3]),
                    }
                }
            },
            {
                name: title[4].label,
                x: 600,
                y: 200,
                value: title[4],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[4]),
                    }
                }
            },
            // 二层
            {
                name: title[5].label,
                x: 0,
                y: 400,
                value: title[5],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[5]),
                    }
                }
            },
            {
                name: title[6].label,
                x: 150,
                y: 400,
                value: title[6],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[6]),
                    }
                }
            },
            {
                name: title[7].label,
                x: 300,
                y: 400,
                value: title[7],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[7]),
                    }
                }
            },
            {
                name: title[8].label,
                x: 450,
                y: 400,
                value: title[8],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[8]),
                    }
                }
            },
            {
                name: title[9].label,
                x: 600,
                y: 400,
                value: title[9],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[9]),
                    }
                }
            },
            // 三层
            {
                name: title[10].label,
                x: 0,
                y: 600,
                value: title[10],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[10]),
                    }
                }
            },
            {
                name: title[11].label,
                x: 150,
                y: 600,
                value: title[11],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[11]),
                    }
                }
            },
            {
                name: title[12].label,
                x: 450,
                y: 600,
                value: title[12],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[12]),
                    }
                }
            },

            // 一层
            {
                name: '1',
                x: 300,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '2',
                x: 150,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '3',
                x: 0,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '4',
                x: 350,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '5',
                x: 600,
                y: 100,
                symbolSize: 0,
            },
            // 二层
            {
                name: '21',
                x: 0,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '22',
                x: 150,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '23',
                x: 300,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '24',
                x: 350,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '25',
                x: 450,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '26',
                x: 600,
                y: 300,
                symbolSize: 0,
            },
            // 三层
            {
                name: '31',
                x: 0,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '32',
                x: 150,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '33',
                x: 300,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '34',
                x: 450,
                y: 500,
                symbolSize: 0,
            },
        ],
        // links: [],
        //这是点与点之间的连接关系
        links: [
            // 零层
            {
                source: title[0].label,
                target: '1',
            },
            // 一层
            {
                source: '3',
                target: title[1].label,
            },
            {
                source: '2',
                target: title[2].label,
            },
            {
                source: '4',
                target: title[3].label,
            },
            {
                source: '5',
                target: title[4].label,
            },
            // 二层
            {
                source: title[3].label,
                target: '24',
            },
            {
                source: '21',
                target: title[5].label,
            },
            {
                source: '22',
                target: title[6].label,
            },
            {
                source: '23',
                target: title[7].label,
            },
            {
                source: '25',
                target: title[8].label,
            },
            {
                source: '26',
                target: title[9].label,
            },
            // 三层
            {
                source: title[7].label,
                target: '33',
            },
            {
                source: '31',
                target: title[10].label,
            },
            {
                source: '32',
                target: title[11].label,
            },
            {
                source: '34',
                target: title[12].label,
            },

            // 一层
            {
                source: '1',
                target: '2',
                symbol: 'none',
            },
            {
                source: '2',
                target: '3',
                symbol: 'none',
            },
            {
                source: '1',
                target: '4',
                symbol: 'none',
            },
            {
                source: '4',
                target: '5',
                symbol: 'none',
            },
            // 二层
            {
                source: '21',
                target: '22',
                symbol: 'none',
            },
            {
                source: '22',
                target: '23',
                symbol: 'none',
            },
            {
                source: '23',
                target: '24',
                symbol: 'none',
            },
            {
                source: '24',
                target: '25',
                symbol: 'none',
            },
            {
                source: '25',
                target: '26',
                symbol: 'none',
            },
            // 三层
            {
                source: '31',
                target: '32',
                symbol: 'none',
            },
            {
                source: '32',
                target: '33',
                symbol: 'none',
            },
            {
                source: '33',
                target: '34',
                symbol: 'none',
            },
        ],
        //线条的颜色
        lineStyle: {
            normal: {
                opacity: 0.9,
                color: '#53B5EA',
                type: 'dashed',
                width: 1
            }
        }
    }]
};

更多入口

妍崽崽@
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts画工作流（流程图）
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
毕业设计 基于python的新冠疫情数据分析系统 request+echarts+layui
06-13
项目为本人的毕业设计 数据来源 实时采集某平台疫情数据 request实现对某平台疫情数据爬虫 线性回归预测分析 flask实现前后端交互 luyui前端页面 echarts实现新冠疫情数据分析 项目不易 多多支持！
echars实现全流程图
weixin_51935690的博客
01-08 4115
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 1.vue引入echars 终端下载echarts npm install echarts@4.8.0 --save 2.在main.js中引入 import echarts from "echarts" Vue.prototype.$echarts = echarts; 3.在组件中代码如下(已标注) <template> <div class="server"> &lt
使用echarts创建流程图
热门推荐
mermanangel的博客
05-26 1万+
使用echarts创建流程图使用echarts创建流程图 使用echarts创建流程图 为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。 首先创建一个div，为echarts准备一个具备大小的Dom <div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div> <script type="text/javascript"> // 基
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
最新发布
weixin_44006009的博客
03-22 209
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
ECharts
small_rain_的博客
10-27 1090
转自黑马程序员pink老师 ## 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 ### 01-使用技术 完成该项目需要具备以下知识： - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础** ### 02- 案例适配方案 - 设计稿是1920px 1. f...
echarts 流程图
yangchuangxyz的博客
04-22 5996
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
用echarts绘制流程图
liuli0927的博客
07-20 2788
当这两个流程图进行切换展示时，一定要使用v-show。
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1288
echarts绘制流程图及自定义样式
echart流程图-工序及状态
yefeng1308的博客
09-17 1698
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 9809
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
j2ee实验-模拟传感器的Web程序-servlet+jsp+mysql+echarts.zip
07-10
2、在第二个页面上以折线图的形式显示当前时刻之前1小时内的温度变化曲线（参考echart网站） 3、以直方图的形式显示最近一周内每天的平均温度 提交内容为Maven工程、数据库脚本文件以及针对本程序的使用说明简述...
Echarts水管图标
10-16
Echarts做的水管图表，自适应，可控制管道内动态水流
jQuery自定义工作流程图代码
06-24
jQuery自定义工作流程图代码是一款基于jQuery跟ECharts制作的工作流程图自定义添加修改，点击创建工作流程项目，支持添加删除或重命名等功能。
echarts绘制流程图
YLiu77的博客
11-02 3633
先上效果图： js代码： // 图标坐标，预先调好每个点的坐标 var nodes = [{ x: 100, y: 950, nodeName: '', svgPath: './Images/tank.png', symbolSize: 80, position: 'inside' }, { x: 300, y: 950, nodeName: '', svgPath: './Images/tank.png',
echarts3 graph java_记录使用echarts的graph类型绘制流程图全过程（一）-x，y位置的计算...
weixin_29740913的博客
02-26 1075
先说下本次案例业务需求，输入2个节点，获取数据后绘制出2个节点间的路径，之前使用的是网状图，但是网状图的效果不佳，需要转换成流程图的模式：那么如何在不修改数据的情况下，实现类似效果尼？看了下echarts的graph类型，可以实现类似的，下面是官方的实例从实例中可以看出，难点在于节点的显示位置x,y和曲线的设置。业务数据中：1、节点的数量不定，关系的数量不定，2、后台返回的数据只有单独的节点信息和...
【echarts】用地图模块做动态流程图2.0（根据后台数据自动均匀排布，且实时更新节点状态）
arminc的博客
08-09 6309
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了，设计到的功能就是可以根据后台数据重新进行位置排布，且实时刷新节点的数据。用ec写出这个效果不难，参考demo1 这个主要是设计到如何根据数据进行重新排布，实时刷数据，这些都是ec插件没有的，需要我们去苦逼手写的。 3.代码： 3.1要知道的： 其实在敲代码前，就应该意识到和后台要的数据是什么样的，要知道我们是用地图模块实现...
echarts+asp.net源码
10-17
ECharts是一个强大的数据可视化库，提供了丰富的图表和图形类型，可用于在网页上展示各种数据。而ECharts的ASP.NET源码指的是使用ASP.NET开发框架编写的ECharts的相关代码和应用。 ECharts的ASP.NET源码通常包含两部分：前端代码和后端代码。前端代码主要使用JavaScript和HTML，用于创建和配置图表实例，处理用户交互等。后端代码则使用C#或其他ASP.NET支持的语言，用于获取数据并返回给前端，实现数据的动态更新和交互。 在ECharts的ASP.NET源码中，前端代码通常需要引入ECharts的JavaScript库，并使用相关的API来创建各种图表实例。通过配置不同的选项，可以设置图表的样式、数据、标题、坐标轴等属性，从而实现不同类型的图表展示。 而后端代码则需要处理数据的获取和处理。可以通过数据库查询、接口调用等方式获取数据，并利用ASP.NET的数据处理技术进行数据的处理和封装。最后，将经处理后的数据返回给前端，在网页上实现动态展示和刷新。 ECharts的ASP.NET源码的开发过程需要熟悉ECharts的相关API和ASP.NET的开发技术。通过合理的代码组织和模块化设计，可以提高代码的可维护性和扩展性。在实际开发中，还可以结合其他的前端或后端框架，如Bootstrap、jQuery、ASP.NET MVC等，来简化开发流程和提高用户体验。 总而言之，ECharts的ASP.NET源码是使用ASP.NET开发框架编写的ECharts相关代码和应用。通过前端和后端的配合，实现了数据的可视化展示和动态更新。这可以帮助开发者根据具体需求快速搭建互动的、直观的数据展示页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值